import { Row, Col, Switch, Tag, DatePicker, Tabs, Icon, Form, Input, TimePicker } from 'antd';
import { WeaDialog, WeaLocaleProvider } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;
// import isEmpty from 'lodash/isEmpty';
let _this = null;

class Collapse extends React.Component {
    constructor(props) {
        super(props);
        _this = this;
        this.state = {
            showGroup: props.showGroup ? props.showGroup : false,
            title: props.title ? props.title : getLabel(383345, '请输入标题'),
        };
    }
    shouldComponentUpdate(nextProps, nextState) {
        // 组件渲染控制
        // return this.props.title !== nextProps.title
        return true;
    }
    componentWillReceiveProps(nextProps) {
        if (this.props.showGroup !== nextProps.showGroup) {
            this.setState({ showGroup: nextProps.showGroup });
        }
    }


    render() {
        const { showGroup, title } = this.state;
        let { customIcon = '', childrenStyle = {} } = this.props;
        childrenStyle = { ...childrenStyle, paddingTop: '10px' };
        return (
            <div className="createWorkPlan-collapse" style={{ padding: '16px 16px 0 16px' }}>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@gnapeh`}
                  className="createWorkPlan-collapse-title"
                  style={{
                  padding: '0 0 10px 0',
borderBottom: '1px solid #ebebeb',
                  color: '#484848',
                }}
                >
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@qht97m`} span="14">
                        <div style={{ fontSize: '12px', paddingLeft: '10px' }}>{title}</div>
                    </Col>
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@591tq7`} span="10" style={{ textAlign: 'right', fontSize: 12 }}>
                        {customIcon &&
                            customIcon
                        }
                        <span className={showGroup ? 'icon-coms-up' : 'icon-coms-down'} onClick={() => this.setState({ showGroup: !showGroup })} style={{ paddingRight: '10px', color: '#B2B2B2', display: 'inline-block', cursor: 'pointer' }} />
                    </Col>
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@08j7e5`} className="createWorkPlan-collapse-content" style={showGroup ? childrenStyle : { height: 0, paddingTop: '20px', overflow: 'hidden' }}>
                    {this.props.children}
                </Row>
            </div>
        );
    }
}

export default Collapse;
